{%extends "base.html"%}
{%block title%}
在线IDE
{%endblock%}
{%block head%}
<script src="/static/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/socket.io/2.3.0/socket.io.js"></script>
{%endblock%}
{%block body%}

<script>
    let ide;
    let socket;

    $(document).ready(() => {

        ide = new Vue({
            el: "#ide",
            delimiters: ['{[', ']}'],
            data: {
                langs: null,
                selectedLang: "",
                code: "", input: "",
                done: false, output: "", loading: false, runID: "", parameter: ""
            }, methods: {
                saveToBrowser() {
                    window.localStorage.setItem("hellojudge2-ide", JSON.stringify({
                        code: this.code, input: this.input, lang: this.selectedLang, parameter: this.parameter
                    }));
                },
                loadFromBroswer() {
                    let obj = window.localStorage.getItem("hellojudge2-ide");
                    if (!obj) {
                        return;
                    }
                    let data = JSON.parse(obj);
                    this.code = data.code, this.input = data.input, this.selectedLang = data.lang;
                    this.parameter = data.parameter;
                },
                submit() {
                    if (this.loading) return;
                    this.loading = true;
                    this.saveToBrowser();
                    $.post("/api/ide/submit", { code: this.code, input: this.input, lang: this.selectedLang, parameter: this.parameter }).done(x => {
                        this.loading = false;
                        x = JSON.parse(x);
                        if (x.code) {
                            showErrorModal(x.message);

                            return;
                        }
                        console.log(x);
                        ide.runID = x.data.run_id;
                        // let run_id = x.data.run_id;

                    });
                }
            }, mounted() {

                axios.post("/api/get_supported_langs").then(x => {
                    x = x.data;
                    console.log(x);
                    if (x.code) {
                        showErrorModal(x.message);
                        return;
                    }
                    this.selectedLang = x.list[0].id;
                    this.langs = {};
                    x.list.forEach((x) => {
                        this.langs[x.id] = x;
                    })
                    this.done = true;
                    this.loadFromBroswer();
                    socket = io.connect("/ws/iderun");
                    socket.emit("init");
                    socket.on("update", x => {
                        console.log("recv", x);
                        if (x.run_id != ide.runID) return;
                        let now = new Date();

                        this.output = now.toLocaleString() + "\n" + x.message;
                        if (x.status == "done") {
                            this.loading = false;
                            ide.runID = "";
                        }
                    });
                });

            }
        });
    });

    Vue.component("editor", {
        delimiters: ['{[', ']}'],
        render: function (h) {
            var height = this.height ? this.px(this.height) : '100%'
            var width = this.width ? this.px(this.width) : '100%'
            return h('div', {
                attrs: {
                    style: "height: " + height + '; width: ' + width,
                }
            })
        },
        props: {
            value: {
                type: String,
                required: true
            },
            lang: String,
            theme: String,
            height: true,
            width: true,
            options: Object
        },
        data: function () {
            return {
                editor: null,
                contentBackup: ""
            }
        },
        methods: {
            px: function (n) {
                if (/^\d*$/.test(n)) {
                    return n + "px";
                }
                return n;
            }
        },
        watch: {
            value: function (val) {
                if (this.contentBackup !== val) {
                    this.editor.session.setValue(val, 1);
                    this.contentBackup = val;
                }
            },
            theme: function (newTheme) {
                this.editor.setTheme('ace/theme/' + newTheme);
            },
            lang: function (newLang) {
                this.editor.getSession().setMode('ace/mode/' + newLang);
            },
            options: function (newOption) {
                this.editor.setOptions(newOption);
            },
            height: function () {
                this.$nextTick(function () {
                    this.editor.resize()
                })
            },
            width: function () {
                this.$nextTick(function () {
                    this.editor.resize()
                })
            }
        },
        beforeDestroy: function () {
            this.editor.destroy();
            this.editor.container.remove();
        },
        mounted: function () {
            var vm = this;
            var lang = this.lang || 'text';
            var theme = this.theme || 'chrome';

            // require('brace/ext/emmet');

            var editor = vm.editor = ace.edit(this.$el);
            this.$emit('init', editor);

            editor.$blockScrolling = Infinity;
            //editor.setOption("enableEmmet", true);
            editor.getSession().setMode('ace/mode/' + lang);
            editor.setTheme('ace/theme/' + theme);
            editor.setValue(this.value, 1);
            this.contentBackup = this.value;
            editor.setFontSize(18);
            editor.setOption("wrap", "free");
            ace.require("ace/ext/language_tools");
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true
            });
            editor.on('change', function () {
                var content = editor.getValue();
                vm.$emit('input', content);
                vm.contentBackup = content;
            });
            if (vm.options)
                editor.setOptions(vm.options);
        }
    });
</script>
<div id="ide" v-if="done">
    <div class="ui header">
        <h1>在线IDE</h1>
    </div>
    <div class="ui one column grid">
        <div class="ui column">
            <div class="ui two column grid" style="min-height: 500px;">
                <div class="ui four wide column">
                    <div class="ui vertical pointing menu" style="overflow-y: scroll;height:500px;  overflow-x: hidden">
                        <a class="item" v-for="val,key in langs" :data-id="key"
                            v-bind:class="{active:selectedLang==key}" @click="selectedLang=key">
                            <span>
                                <span class="ui header">
                                    <h4>{[val.display]}</h4>
                                </span>{[val.version]}
                            </span>
                        </a>
                    </div>
                </div>
                <div class="twelve wide stretched column" style="padding-left: 0;">
                    <div class="ui container">
                        <editor v-model="code" v-bind:lang="langs[selectedLang].ace_mode" theme="github"
                            style="left:0px;min-height: 500px;">
                        </editor>
                    </div>
                </div>

            </div>
        </div>
        <div class="ui column">
            <div class="ui stacked segment">
                <div class="ui two column grid">
                    <div class="ui eight wide column">
                        <div class="ui form">
                            <div class="ui field">
                                <label>输入</label>
                                <textarea v-model="input" style="overflow-y: scroll"></textarea>
                            </div>
                            <div class="ui field">
                                <label>编译参数</label>
                                <input v-model="parameter">
                            </div>
                        </div>
                    </div>
                    <div class="ui eight wide column">
                        <div class="ui form">
                            <div class="ui field">
                                <label>输出</label>
                                <textarea v-model="output" style="overflow-y: scroll"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ui center aligned container" style="margin-top: 50px;">
        <div class="ui large green button" v-on:click="submit" v-bind:class="{loading:loading}">提交</div>
    </div>
</div>
{%endblock%}